<script lang="ts" setup>
import {ref, watch} from 'vue'
import mittBus from '@/utils/mittBus'
import useThemeStore from '@/store/theme.ts'
import {setTheme} from '@/hooks/setTheme.ts'

const themeStore = useThemeStore()
const {changePrimary, switchDark, changeGreyOrWeak} = setTheme()
const drawerVisible = ref(false)
const defaultPrimary = import.meta.env.VITE_DEFAULT_PRIMARY
// 预定义主题颜色
const colorList = [
	defaultPrimary,
	'#DAA96E',
	'#0C819F',
	'#409EFF',
	'#27ae60',
	'#ff5c93',
	'#e74c3c',
	'#fd726d',
	'#f39c12',
	'#9b59b6'
]
mittBus.on('openThemeDrawer', () => (drawerVisible.value = true))

// 监听布局变化，在 body 上添加相对应的 layout class
watch(
	() => themeStore.layout,
	() => {
		const body = document.body
		body.setAttribute('class', themeStore.layout)
	},
	{immediate: true}
)

const changeLayout = (val: string) => {
	themeStore.setLayout(val)
}
</script>

<template>
	<el-drawer v-model="drawerVisible" size="300px" title="布局设置">
		<el-divider class="divider" content-position="center">
			<el-icon>
				<Notification/>
			</el-icon>
			布局切换
		</el-divider>
		<div class="layout-box">
			<el-tooltip :show-after="200" content="纵向" effect="dark" placement="top">
				<div
					:class="['layout-item layout-vertical', themeStore.layout == 'vertical' ? 'is-active' : '']"
					@click="changeLayout('vertical')"
				>
					<div class="layout-dark"/>
					<div class="layout-container">
						<div class="layout-light"/>
						<div class="layout-content"/>
					</div>
					<el-icon v-if="themeStore.layout == 'vertical'">
						<CircleCheckFilled/>
					</el-icon>
				</div>
			</el-tooltip>
			<el-tooltip :show-after="200" content="经典" effect="dark" placement="top">
				<div
					:class="['layout-item layout-classic', themeStore.layout == 'classic' ? 'is-active' : '']"
					@click="changeLayout('classic')"
				>
					<div class="layout-dark"/>
					<div class="layout-container">
						<div class="layout-light"/>
						<div class="layout-content"/>
					</div>
					<el-icon v-if="themeStore.layout == 'classic'">
						<CircleCheckFilled/>
					</el-icon>
				</div>
			</el-tooltip>
			<el-tooltip :show-after="200" content="横向" effect="dark" placement="top">
				<div
					:class="['layout-item layout-transverse', themeStore.layout == 'transverse' ? 'is-active' : '']"
					@click="changeLayout('transverse')"
				>
					<div class="layout-dark"/>
					<div class="layout-content"/>
					<el-icon v-if="themeStore.layout == 'transverse'">
						<CircleCheckFilled/>
					</el-icon>
				</div>
			</el-tooltip>
			<el-tooltip :show-after="200" content="分栏" effect="dark" placement="top">
				<div
					:class="['layout-item layout-columns', themeStore.layout == 'columns' ? 'is-active' : '']"
					@click="changeLayout('columns')"
				>
					<div class="layout-dark"/>
					<div class="layout-light"/>
					<div class="layout-content"/>
					<el-icon v-if="themeStore.layout == 'columns'">
						<CircleCheckFilled/>
					</el-icon>
				</div>
			</el-tooltip>
		</div>
		<!-- 全局主题 -->
		<el-divider class="divider" content-position="center">
			<el-icon>
				<ColdDrink/>
			</el-icon>
			全局主题
		</el-divider>
		<div class="theme-item">
			<span>主题颜色</span>
			<el-color-picker v-model="themeStore.primary" :predefine="colorList" @change="changePrimary"/>
		</div>
		<div class="theme-item">
			<span>暗黑模式</span>
			<el-switch v-model="themeStore.isDark" active-icon="Sunny" inactive-icon="Moon" inline-prompt @change="switchDark"/>
		</div>
		<div class="theme-item">
			<span>灰色模式</span>
			<el-switch v-model="themeStore.isGrey" @change="changeGreyOrWeak($event, 'grey')"/>
		</div>
		<div class="theme-item">
			<span>色弱模式</span>
			<el-switch v-model="themeStore.isWeak" @change="changeGreyOrWeak($event, 'weak')"/>
		</div>
		<br>

		<!-- 界面设置 -->
		<el-divider class="divider" content-position="center">
			<el-icon>
				<Setting/>
			</el-icon>
			界面设置
		</el-divider>
		<div class="theme-item">
			<span>折叠菜单</span>
			<el-switch v-model="themeStore.isCollapse"/>
		</div>
		<!--<div class="theme-item">-->
		<!--	<span>面包屑</span>-->
		<!--	<el-switch v-model="themeStore.breadcrumb"/>-->
		<!--</div>-->
		<div class="theme-item">
			<span>面包屑图标</span>
			<el-switch v-model="themeStore.breadcrumbIcon"/>
		</div>
		<div class="theme-item">
			<span>标签栏</span>
			<el-switch v-model="themeStore.tabs"/>
		</div>
		<div class="theme-item">
			<span>标签栏图标</span>
			<el-switch v-model="themeStore.tabsIcon"/>
		</div>
	</el-drawer>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
